<template>
  <div class="h100">
    <div class="service">
      <div class="rec-detail-title">
        我的位置：
        <span @click="gohome()">首页</span>
      </div>
      <div class="service-bac">
        <div class="service-bac-title">服务分类</div>
        <div class="a-df w100">
          <div class="service-class-item service-class-production" @click="routerpush(8)">
            <span class="service-item-title">生产类</span>
          </div>
          <div class="service-class-item service-class-lift" @click="routerpush(1)">
            <span class="service-item-title">生活类</span>
          </div>
          <div class="service-class-item service-class-policy" @click="routerpush(9)">
            <span class="service-item-title">政策类</span>
          </div>
        </div>
      </div>
      <!-- <iframe src="http://localhost:8088/login" frameborder="0"></iframe> -->
      <div class="register-right-wrapper" v-if="islogin">
        <div class="title">
          <h1>您好！</h1>
          <p>欢迎来到联安共享</p>
        </div>
        <a-form :form="form" class="login-form" :hideRequiredMark="true" @submit="handleSubmit">
          <a-form-item label="请输入手机号">
            <a-input
              size="large"
              type="text"
              v-decorator="[
                'businessName',
                { rules: [{ required: true, message: '请输入账号!', whitespace: true, trigger: 'change' }] },
              ]"
            >
              <a-icon slot="suffix" type="user" style="color: rgba(0, 0, 0, 0.25)" />
            </a-input>
          </a-form-item>
          <a-form-item label="验证码">
            <a-input class="code-input" size="large" type="text" v-decorator="['password']"> </a-input>
            <span class="code">
              <div class="obtain" v-if="!obtainLoading" @click="obtainCode()" style="width: 120px; height: 40px">
                请获取验证码
              </div>
              <div class="obtain" v-else style="width: 120px; height: 40px">{{ Countdown }}秒后重发</div>
            </span>
          </a-form-item>
          <a-form-item>
            <a class="login-form-forgot" @click="register()">前往注册</a>
            <a-button
              type="primary"
              size="large"
              html-type="submit"
              class="login-form-sign"
              :loading="loginLoading"
              @click="handleSubmit"
              >登录</a-button
            >
          </a-form-item>
        </a-form>
      </div>
      <div class="register-right-wrapper" v-else>
        <div class="title">
          <h1>您好！</h1>
          <p>欢迎来到联安共享后台管理系统</p>
        </div>
        <a-form :form="form" class="login-form" :hideRequiredMark="true" @submit="handleRegister">
          <!-- <a-form-item label="请输入注册类型">
          <a-checkbox-group v-decorator="[
            'ZHLB',
          ]"
            :options="plainOptions" 
          >
        </a-checkbox-group>
        </a-form-item> -->
          <a-form-item label="请输入手机号">
            <a-input
              size="large"
              type="text"
              v-decorator="[
                'businessName',
                { rules: [{ required: true, message: '请输入账号!', whitespace: true, trigger: 'change' }] },
              ]"
            >
              <a-icon slot="suffix" type="user" style="color: rgba(0, 0, 0, 0.25)" />
            </a-input>
          </a-form-item>
          <a-form-item label="验证码">
            <a-input class="code-input" size="large" type="text" v-decorator="['bPassword']"> </a-input>
            <span class="code">
              <div class="obtain" v-if="!obtainLoading" @click="obtainCode()" style="width: 120px; height: 40px">
                请获取验证码
              </div>
              <div class="obtain" v-else style="width: 120px; height: 40px">{{ Countdown }}秒后重发</div>
            </span>
          </a-form-item>
          <a-form-item>
            <!-- <a-checkbox v-decorator="['remember', { valuePropName: 'checked', initialValue: false }]" >记住密码</a-checkbox> -->
            <a class="login-form-forgot" @click="register()">前往登录</a>
            <a-button
              type="primary"
              size="large"
              html-type="submit"
              class="login-form-sign"
              :loading="loginLoading"
              @click="handleRegister"
              >注册</a-button
            >
          </a-form-item>
        </a-form>
      </div>
    </div>
  </div>
</template>

<script>
import { getAppGetFWLBListApi, getPowerInfoUserIDApi } from '@/api/resService'
import md5 from 'md5'
import Cookies from 'js-cookie'
import { encryptionParameters, decryptionParameters } from '@/utils/encrypt'
import { mapActions } from 'vuex'
import store from '@/store/index'
import { makeCode } from '@/utils/util'

export default {
  name: 'Introduction',
  data() {
    return {
      productionList: [],
      lifeList: [],
      policyList: [],
      upload: process.env.VUE_APP_API_BASE_URL,
      loginLoading: false,
      obtainLoading: false,
      Countdown: 60,
      verifyCode: '',
      timer: null,
      islogin: true,
      form: this.$form.createForm(this, { name: 'loginForm' }),
    }
  },
  created() {
    this.code()
  },
  methods: {
    getAppGetFWLBList1() {
      getAppGetFWLBListApi({
        pageSize: 10,
        pageIndex: 1,
        RMTJ: 'ALL',
        Fid: 1,
      })
        .then((res) => {
          console.log('res', res)
          this.lifeList = res.data
        })
        .catch((err) => {})
        .finally(() => {})
    },
    getAppGetFWLBList8() {
      getAppGetFWLBListApi({
        pageSize: 10,
        pageIndex: 1,
        RMTJ: 'ALL',
        Fid: 8,
      })
        .then((res) => {
          console.log('res', res)
          this.productionList = res.data
        })
        .catch((err) => {})
        .finally(() => {})
    },
    getAppGetFWLBList9() {
      getAppGetFWLBListApi({
        pageSize: 10,
        pageIndex: 1,
        RMTJ: 'ALL',
        Fid: 9,
      })
        .then((res) => {
          console.log('res', res)
          this.policyList = res.data
        })
        .catch((err) => {})
        .finally(() => {})
    },
    routerpush(id) {
      // this.$router.push({ path: item.path })
      this.$router.push({ path: '/reception/detail/index', query: { id: id } })
    },
    ...mapActions(['Login', 'Register', 'ObtainCode']),
    code() {
      makeCode({ target: '#identify' }, (result) => {
        this.verifyCode = result
      })
    },
    gohome() {
      this.$router.push({ path: '/reception/Introduction/index' })
    },
    register() {
      console.log('111111111111111')
      this.$router.push({ path: '/reception/register/index' })
      // this.islogin = !this.islogin
    },
    obtainCode() {
      const { ObtainCode } = this
      this.form.validateFields((err, values) => {
        ObtainCode({
          _MobelNos: values.businessName,
        }).then((res) => {})
      })
      this.obtainLoading = true

      this.timer = setInterval(() => {
        this.Countdown--
        if (this.Countdown <= 0) {
          clearInterval(this.timer)
          this.timer = null
          this.Countdown = 60
          this.obtainLoading = false
        }
      }, 1000)
    },
    //注册
    handleRegister(e) {
      this.$router.push({ path: '/reception/register/index' })
      // const { Register } = this
      // this.form.validateFields((err, values) => {
      //   Register({
      //     businessName: values.businessName,
      //     ZHLB: values.ZHLB,
      //     bPassword: values.bPassword,
      //   }).then((res) => {
      //     this.$notification.open({
      //       message: '',
      //       description: res.msg,
      //     })
      //   })
      // })
    },
    //退出登录
    handleLogout() {
      return this.$store.dispatch('Logout').then(() => {})
    },
    //登录
    handleSubmit(e) {
      e.preventDefault()
      const { Login } = this
      this.form.validateFields((err, values) => {
        if (!err) {
          this.loginLoading = true
          Login({
            username: values.businessName + '|' + 1,
            password: values.password,
            grant_type: 'password',
          })
            .then((res) => {
              getPowerInfoUserIDApi().then((res) => {
                if (res.data.ZHLB == 1) {
                  this.$notification['success']({
                    message: '成功',
                    description: '你已经成功登录',
                    duration: 8,
                  })
                  this.handleLogout()
                } else {
                  window.open(
                    'http://192.168.1.71:8000/reslogin?username=' +
                      values.businessName +
                      '&password=' +
                      values.password,
                    '_blank'
                  )
                  this.handleLogout()
                }
              })
            })
            .catch((err) => this.requestFailed(err))
            .finally(() => {
              this.loginLoading = false
            })
        }
      })
    },
    loginSuccess(res) {
      this.$router.push({ path: '/' })
      this.isLoginError = false
    },
    requestFailed(err) {
      console.log(err)
      this.isLoginError = true
      this.$notification['error']({
        message: '错误',
        description: ((err.response || {}).data || {}).error || '请求出现错误，请稍后再试',
        duration: 4,
      })
    },
  },
  mounted() {
    // this.getAppGetFWLBList1()
    // this.getAppGetFWLBList8()
    // this.getAppGetFWLBList9()
    // console.log('Cookies.get',Cookies.get('LIANLGU'),Cookies.get('LIANLGP'),JSON.parse(decryptionParameters(Cookies.get('LIANLGU'))),JSON.parse(decryptionParameters(Cookies.get('LIANLGP'))))
    if (Cookies.get('LIANLGU') && Cookies.get('LIANLGP')) {
      // cookie 存在则默认填充用户名和密码
      this.$nextTick(function () {
        this.form.setFieldsValue({
          username: JSON.parse(decryptionParameters(Cookies.get('LIANLGU'))),
          password: JSON.parse(decryptionParameters(Cookies.get('LIANLGP'))),
          remember: true,
        })
      })
    }
  },
}
</script>

<style lang="less">
.service {
  .ant-form-item {
    margin-bottom: 20px !important;
  }
  .ant-form-item-label > label {
    color: #fff !important;
  }
}
</style>

<style lang="less" scoped>
.service {
  // height: 380px;
  height: 100%;
  width: 1600px;
  margin: 0 auto;
  display: flex;
  position: relative;
  .rec-detail-title {
    position: absolute;
    left: 50px;
    top: 20px;
  }
  .service-bac {
    display: flex;
    width: 700px;
    flex-direction: column;
    margin-left: 50px;
    // padding-top:90px ;
    .service-bac-title{
      margin-top:40px ;
      font-size: 18px;
      // position: absolute;
      margin-bottom:60px ;
      width: 100%;
      border-bottom: 2px solid #cacaca;
    }
    .service-class-lift {
      background-image: url('~@/assets/reception/home/lift.png');
    }
    .service-class-production {
      background-image: url('~@/assets/reception/home/production.png');
    }
    .service-class-policy {
      background-image: url('~@/assets/reception/home/policy.png');
    }
    .service-class-item {
      background-repeat: no-repeat;
      background-size: cover;
      width: 200px;
      color: #bb413f;
      margin: auto;
      height: 200px;
      border: solid 3px #eaeaea;
      border-radius: 200px;
      line-height: 200px;
      cursor: pointer;
      .service-item-title {
        display: block;
        width: 100%;
        text-align: center;
        // color: #000;
        margin-bottom: 0;
        font-size: 30px;
      }
      .service-items {
        display: flex;
        flex-wrap: wrap;
        overflow: auto;
        height: 300px;
        padding-bottom: 20px;
        // overflow-y: scroll;
        .service-item {
          width: 130px;
          height: 120px;
          margin: 20px 15px;
          margin-bottom: 0;
          text-align: center;
          background: #e7e7e7;
          font-size: 18px;
          color: #c4c4c4;
          cursor: pointer;
          img {
            width: 40px;
            height: 40px;
            display: block;
            margin: 10px auto;
            margin-top: 30px;
          }
        }
      }
    }
  }
  .service-title {
    color: #1e50ae;
    font-size: 24px;
    display: block;
    text-align: center;
    width: 100%;
  }
  .service-search {
    margin: 20px auto;
    margin-top: 0;
    padding-top: 20px;
    width: 1500px;
    .ant-input-group .ant-input {
      border: none;
      background: #edf2f5;
    }
  }
  .service-hot {
    margin: 0 20px;
    img {
      height: 24px;
    }
  }
}
.register-right-wrapper {
  // background: #1e50ae;
  // height: 200px;
  padding: 20px;
  margin: 20px 0;
  margin-left:400px ;
  // float: right;
  background-image: url('~@/assets/reception/home/loginbac.png');
  background-position: bottom;
  background-repeat: no-repeat;
  // background-size: 100% 406px;
  -moz-user-select: none; /*火狐*/
  -webkit-user-select: none; /*webkit浏览器*/
  -ms-user-select: none; /*IE10*/
  -khtml-user-select: none; /*早期浏览器*/
  user-select: none;
  .title {
    h1 {
      margin-bottom: 6px;
      font-size: 36px;
      line-height: 36px;
      font-weight: 400;
      color: #fff;
    }
    p {
      font-size: 20px;
      color: #c9cdd4;
      font-weight: 400;
    }
  }
  .login-form {
    margin-top: 6px;
  }
  .login-form-forgot {
    float: right;
    color: #cccccc;
    font-size: 18px;
  }
  .login-form-sign {
    width: 100%;
    // margin-top: 41px;
  }
  .code-input {
    width: 65%;
  }
  .code {
    float: right;
    cursor: pointer;
    .obtain {
      border: #acd2ff 1px solid;
      color: #fff;
      text-align: center;
      border-radius: 10px;
    }
  }
}
.ant-form-item-label > label {
  color: #fff;
}
</style>
